import {
    ProForm,
    ProFormText,
} from '@ant-design/pro-components';
import {
    LockOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { message, Button } from 'antd';
// 引入 二次封装的 axios
import request from '../http/request'
// 引入样式
import LoginCss from './Login.module.css';
// 引入路由
import { useNavigate } from 'react-router-dom'
// 防抖节流函数引入
import _ from 'lodash';
// 
import { useState } from 'react';
const waitTime = (time = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

const Login = () => {
    const navigate = useNavigate()
    // 按钮点击登录禁用加载状态
    const [btnLoding, setBtnLoding] = useState(false)
    // 登录按钮点击
    const onfinish = async (values) => {
        setBtnLoding(true)
        await waitTime(2000);
        request.get('/api/login', { params: values }).then(res => {
            // console.log(res, 'res')
            // let data = res.data
            if (res.code == 200) {
                localStorage.setItem('token', res.token)
                message.success('登录成功');
                // 成功跳转
                navigate('/home/propertiesforsale/groupbuyingmanagement/addgroupbuying')
            } else if (res.code == 401) {
                message.error(res.msg);
            } else {
                message.error(res.msg);
            }
            setBtnLoding(false)
        }, 100)
    }

    return <div className={LoginCss.content}>
        <div className={LoginCss.loginForm} >
            <h3 className={LoginCss.formH3}>管理中心登录</h3>
            <ProForm
                submitter={{
                    render: (props, doms) => {
                        return [
                            <div><Button
                                style={{ marginRight: '20px' }}
                                key="rest"
                                onClick={() => props.form?.resetFields()}
                            >
                                重置
                            </Button>
                                <Button
                                    loading={btnLoding}
                                    type="primary"
                                    key="submit"
                                    onClick={() => props.form?.submit?.()}
                                >
                                    登录
                                </Button></div>
                        ];
                    },
                }}
                onFinish={_.debounce((values) => onfinish(values), 300)}
                params={{}}
                request={async () => {
                    await waitTime(100);
                    return {};
                }}
            >
                <ProFormText
                    fieldProps={{
                        size: 'large',
                        prefix: <UserOutlined className={'prefixIcon'} />,
                    }}
                    name="username"

                    tooltip="最长为 24 位"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名!',
                        },
                    ]}
                    placeholder="请输入用户名"
                />
                <ProFormText.Password
                    fieldProps={{
                        size: 'large',
                        prefix: <LockOutlined className={'prefixIcon'} />,
                    }}
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                    ]}
                    placeholder="请输入密码"
                />
            </ProForm >
        </div>
    </div >
};
export default Login